<template>
  <div>
    <div class="title">周末去哪儿</div>
    <ul>
      <li class="item border-bottom" v-for="item in list" :key="item.id">
        <div class="item-img-wrapper">
        <img class="item-img" :src="item.imgUrl" alt="">
        </div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
  export default{
    name:'HomeWeekend',
    data:function(){
      return {
      }
    },
    props:['list']
  }
</script>
<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .title
    line-height:0.4rem;
    background-color: #eee;
    text-indent 0.2rem;
  .item-img-wrapper
    overflow hidden;
    height:0;
    padding-bottom:37.09%;
  .item-img
    width: 100%;
  .item-info
    flex: 1;
    /*这个主要用来解决ellipsis()不能出现省略号的问题*/
    min-width:0;
    padding:0.1rem;
    .item-title
      line-height:0.54rem;
      font-size 0.32rem;
      ellipsis();
    .item-desc
      line-height:0.4rem;
      color:#ccc;
      ellipsis();
</style>
